<template>
  <section id="upcoming" class="py-16 md:py-24 bg-gradient-to-b from-white to-neutral/30">
    <div class="container mx-auto px-4">
      <!-- 标题区域 - 带滚动入场动画 -->
      <div class="mb-12 scroll-animate">
        <div
          class="inline-block px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4"
        >
          即将开拍
        </div>
        <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary mb-3 leading-tight">
          精选拍卖专场预告
        </h2>
        <p class="text-gray-600 max-w-2xl text-lg">
          提前预览即将上线的优质拍卖专场，设置提醒不错过心仪珍品，抢占收藏先机
        </p>
      </div>

      <!-- 瀑布流专场列表 - 带交错入场动画和悬停效果 -->
      <div class="columns-1 md:columns-2 lg:columns-3 gap-6">
        <div
          v-for="(auction, index) in upcomingAuctions"
          :key="auction.id"
          class="break-inside-avoid mb-6 bg-white rounded-xl overflow-hidden shadow-md hover-lift group scroll-animate"
          :style="{ animationDelay: `${(index % 6) * 0.15}s` }"
        >
          <!-- 专场图片区域 - 不同高度营造瀑布流效果 -->
          <div class="relative overflow-hidden" :style="{ height: auction.imageHeight }">
            <img
              :src="auction.image"
              :alt="auction.title"
              class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
            />
            <!-- 渐变遮罩 -->
            <div
              class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"
            ></div>
            <!-- 倒计时卡片 -->
            <div
              class="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-sm rounded-lg p-3 shadow-lg flex items-center justify-between"
            >
              <div class="text-primary font-medium">开拍倒计时</div>
              <div class="flex space-x-1">
                <div
                  class="bg-primary text-white w-8 h-8 rounded flex items-center justify-center text-sm font-medium"
                >
                  {{ auction.countdown.h }}
                </div>
                <div class="text-primary font-bold">:</div>
                <div
                  class="bg-primary text-white w-8 h-8 rounded flex items-center justify-center text-sm font-medium"
                >
                  {{ auction.countdown.m }}
                </div>
                <div class="text-primary font-bold">:</div>
                <div
                  class="bg-primary text-white w-8 h-8 rounded flex items-center justify-center text-sm font-medium"
                >
                  {{ auction.countdown.s }}
                </div>
              </div>
            </div>
            <!-- 专场标签 -->
            <div
              class="absolute top-4 left-4 bg-secondary text-white text-xs font-bold px-3 py-1 rounded-full"
            >
              {{ auction.tag }}
            </div>
          </div>

          <!-- 专场信息区域 -->
          <div class="p-6">
            <div class="flex justify-between items-start mb-4">
              <h3
                class="text-xl font-bold text-dark group-hover:text-primary transition-colors duration-300"
              >
                {{ auction.title }}
              </h3>
              <span class="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded">
                {{ auction.itemsCount }}件拍品
              </span>
            </div>

            <p class="text-gray-600 text-sm mb-5 line-clamp-2">
              {{ auction.description }}
            </p>

            <div class="flex flex-wrap gap-3 mb-6">
              <div class="flex items-center text-gray-500 text-sm">
                <i class="fa fa-calendar-o mr-2 text-primary"></i>
                <span>{{ auction.date }}</span>
              </div>
              <div class="flex items-center text-gray-500 text-sm">
                <i class="fa fa-map-marker mr-2 text-primary"></i>
                <span>{{ auction.location }}</span>
              </div>
            </div>

            <!-- 价格区间和提醒按钮 -->
            <div class="flex flex-wrap justify-between items-center">
              <div>
                <div class="text-xs text-gray-500 mb-1">起拍价区间</div>
                <div class="text-primary font-bold text-lg">
                  {{ auction.priceRange }}
                </div>
              </div>
              <button
                @click="setReminder(auction.id)"
                class="bg-primary/10 hover:bg-primary/20 text-primary text-sm font-medium px-4 py-2 rounded-md transition-all duration-300 flex items-center group"
              >
                <i class="fa fa-bell-o mr-2 group-hover:animate-pulse"></i>
                设置提醒
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

// 即将开拍专场数据（增加至8个，包含不同高度图片）
const upcomingAuctions = ref([
  {
    id: 1,
    title: '明清玉器专场',
    image: 'https://picsum.photos/id/1055/800/600',
    imageHeight: '280px',
    tag: '热门专场',
    description:
      '汇聚明清时期精品玉器，包括和田玉、翡翠、独山玉等珍贵材质，每件拍品均经专家鉴定认证',
    date: '2024年6月18日 10:00',
    location: '线上专场',
    itemsCount: 32,
    priceRange: '¥80,000 - ¥2,600,000',
    countdown: { h: '02', m: '45', s: '36' },
  },
  {
    id: 2,
    title: '近现代书画专场',
    image: 'https://picsum.photos/id/1062/800/500',
    imageHeight: '240px',
    tag: '名家专场',
    description: '包含张大千、齐白石、徐悲鸿等近现代名家作品，涵盖山水、花鸟、人物等多种题材',
    date: '2024年6月20日 14:30',
    location: '北京线下+线上同步',
    itemsCount: 45,
    priceRange: '¥150,000 - ¥5,800,000',
    countdown: { h: '04', m: '18', s: '22' },
  },
  {
    id: 3,
    title: '珠宝钟表专场',
    image: 'https://picsum.photos/id/1074/800/700',
    imageHeight: '320px',
    tag: '奢华专场',
    description: 'Cartier、Patek Philippe、Rolex等名表，搭配钻石、红宝石、蓝宝石等高级珠宝首饰',
    date: '2024年6月22日 09:00',
    location: '上海线下+线上同步',
    itemsCount: 28,
    priceRange: '¥200,000 - ¥3,200,000',
    countdown: { h: '06', m: '52', s: '15' },
  },
  {
    id: 4,
    title: '官窑瓷器专场',
    image: 'https://picsum.photos/id/1079/800/550',
    imageHeight: '260px',
    tag: '精品专场',
    description: '宋代五大名窑珍品，元明清官窑精品瓷器，包含青花瓷、粉彩瓷、单色釉等多个品类',
    date: '2024年6月25日 13:00',
    location: '杭州线下+线上同步',
    itemsCount: 18,
    priceRange: '¥500,000 - ¥8,600,000',
    countdown: { h: '12', m: '33', s: '47' },
  },
  {
    id: 5,
    title: '文房四宝专场',
    image: 'https://picsum.photos/id/1068/800/650',
    imageHeight: '300px',
    tag: '文人专场',
    description: '明清精品文房用具，包括砚台、毛笔、宣纸、墨锭等，多位文人雅士曾使用或收藏',
    date: '2024年6月28日 10:30',
    location: '线上专场',
    itemsCount: 52,
    priceRange: '¥30,000 - ¥1,200,000',
    countdown: { h: '18', m: '21', s: '09' },
  },
  {
    id: 6,
    title: '铜器杂项专场',
    image: 'https://picsum.photos/id/1082/800/480',
    imageHeight: '230px',
    tag: '特色专场',
    description: '古代青铜器、铜镜、铜炉等杂项精品，包含宣德炉、铜镜、铜佛像等多个品类',
    date: '2024年7月2日 15:00',
    location: '广州线下+线上同步',
    itemsCount: 36,
    priceRange: '¥60,000 - ¥1,800,000',
    countdown: { h: '23', m: '15', s: '52' },
  },
  {
    id: 7,
    title: '紫砂茗壶专场',
    image: 'https://picsum.photos/id/1080/800/620',
    imageHeight: '290px',
    tag: '茶香专场',
    description: '顾景舟、时大彬等名家紫砂壶作品，包含不同器型、泥料的精品茗壶',
    date: '2024年7月5日 09:30',
    location: '宜兴线下+线上同步',
    itemsCount: 24,
    priceRange: '¥120,000 - ¥2,300,000',
    countdown: { h: '32', m: '47', s: '31' },
  },
  {
    id: 8,
    title: '西方油画专场',
    image: 'https://picsum.photos/id/1084/800/580',
    imageHeight: '270px',
    tag: '国际专场',
    description: '19-20世纪欧洲油画精品，包含印象派、现实主义等多个流派的经典作品',
    date: '2024年7月8日 14:00',
    location: '线上专场',
    itemsCount: 21,
    priceRange: '¥300,000 - ¥6,500,000',
    countdown: { h: '45', m: '12', s: '08' },
  },
])

// 倒计时更新函数
const updateCountdowns = () => {
  upcomingAuctions.value.forEach((auction) => {
    // 转换为秒数计算
    let totalSeconds =
      parseInt(auction.countdown.h) * 3600 +
      parseInt(auction.countdown.m) * 60 +
      parseInt(auction.countdown.s)

    // 减少1秒
    totalSeconds = Math.max(0, totalSeconds - 1)

    // 转换回时分秒
    const hours = Math.floor(totalSeconds / 3600)
      .toString()
      .padStart(2, '0')
    const minutes = Math.floor((totalSeconds % 3600) / 60)
      .toString()
      .padStart(2, '0')
    const seconds = (totalSeconds % 60).toString().padStart(2, '0')

    // 更新倒计时
    auction.countdown = { h: hours, m: minutes, s: seconds }
  })
}

// 设置提醒功能
const setReminder = (auctionId) => {
  const auction = upcomingAuctions.value.find((item) => item.id === auctionId)
  ElMessage({
    message: `已为「${auction.title}」设置开拍提醒，开拍前15分钟将通知您`,
    type: 'success',
    duration: 3000,
  })
}

// 滚动动画观察器
const setupScrollAnimations = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
}

// 定时器变量
let countdownInterval = null

onMounted(() => {
  // 启动倒计时
  countdownInterval = setInterval(updateCountdowns, 1000)

  // 初始化滚动动画
  setupScrollAnimations()
})

onUnmounted(() => {
  // 清除定时器
  if (countdownInterval) {
    clearInterval(countdownInterval)
  }
})
</script>

<style scoped>
/* 滚动入场动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 悬停提升效果 */
.hover-lift {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px -10px rgba(26, 54, 93, 0.18);
}

/* 瀑布流布局样式 */
.columns-1 {
  column-count: 1;
}

.md\:columns-2 {
  column-count: 2;
}

.lg\:columns-3 {
  column-count: 3;
}

.gap-6 {
  column-gap: 1.5rem;
}

.break-inside-avoid {
  break-inside: avoid;
}

/* 动画效果 */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate-pulse {
  animation: pulse 1.5s infinite;
}
</style>
